@extends('web.layouts.app')

@section('title', trans('seo.other_title').$info->projects_name)
@section('keywords', trans('seo.invest.keywords'))
@section('description', trans('seo.invest.description'))

@section('styles')
  <link rel="stylesheet" type="text/css" href="{{ asset('resources/web/css/products-detail.css')}}">
  <link rel="stylesheet" type="text/css" href="{{ asset('resources/web/css/ucenter.css')}}">
<style type="text/css">
.text-center{
  text-align:center;
}
.Validation-information .postionFixed{
  width:400px
}
.Validation-information em{color:#f0893e}
.Validation-information .cell{
  width:50%;
  float:left;
  text-align:center;
}
.Validation-information table.checkbox{
  width:100%;
}
table.checkbox tbody>td{
  text-align:center
}
.project-content-box .img a > img{
  width:250px;
  height:180px;
}
</style>
@endsection

@section('content')
<div class="container mt20 pt10 wrap clearfix">
  <div class="detail-main L">
    <!--project info-->
    <div class="project-box">
      <div class="project-title">
        <h1>{{$info->projects_name}}</h1>
        @if($info->new_projects)
        <i class="tips">新手标</i>
        @endif
        <!-- <span class="R"><img src="{{asset('resources/web/images/detail_indem.gif')}}" height="16" width="14">100%本息保障</span> -->
      </div>
      <div class="project-info clearfix">
        <dl class="item-col">
          <dt>借款金额</dt>
          <dd><em>{{number_format($info->finance_money/10000,2)}}</em><span>万元</span></dd>
        </dl>
        <!--年化收益利率放到 data-rate里，jquery通过这个属性获取值来计算，具体算法根据实际情况改-->
        <dl class="item-col" id="J_project_rate" data-rate="{{round($info->rate/100,2)}}">
          <dt>年化收益</dt>
          <dd><em>{!! $info->auto_rate !!}</em></dd>
        </dl>
        <!--项目时间-->
        @if($info->finance_time_cate=='m')
        <dl class="item-col" id="J_project_days" data-days="{{$info->finance_time_num*30}}">
          <dt>项目期限</dt>
          <dd><em>{{$info->finance_time_num}}</em><span>个月</span></dd>
        </dl>
        @elseif($info->finance_time_cate=='d')
        <dl class="item-col" id="J_project_days" data-days="{{$info->finance_time_num}}">
          <dt>项目期限</dt>
          <dd><em>{{$info->finance_time_num}}</em><span>天</span></dd>
        </dl>
        @elseif($info->finance_time_cate=='mm')
        <dl class="item-col" id="J_project_days" data-days="{{$info->finance_time_num}}">
          <dt>自然月</dt>
          <dd><em>{{$info->finance_time_num}}</em><span>个月</span></dd>
        </dl>
        @endif
        <div class="progress">
          <!--进度值以百分比放到canvas标签里即可，通过js获取里面的值来画图，不支持canvas的浏览器只显示百分比值-->
          <canvas id="J_detail_progress" width="70" height="70">{{round($info->financed_money/$info->finance_money*100,2)}}%</canvas>
        </div>
      </div>
      <div class="project-step">
        <!-- 投资中:project_step_start -->
        <!-- 还款中:project_step_stop -->
        <!-- 还款完成:project_step_done -->
        <!-- 流标:project_step_lose -->
        <!-- 逾期:project_step_over -->
        @if($info->status=='rush')
        <img src="{{asset('resources/web/images/project_step_start.jpg')}}">
        @elseif($info->status=='payment')
        <img src="{{asset('resources/web/images/project_step_stop.jpg')}}">
        @elseif($info->status=='finish')
        <img src="{{asset('resources/web/images/project_step_done.jpg')}}">
        @elseif($info->status=='fail')
        <img src="{{asset('resources/web/images/project_step_lose.jpg')}}">
        @elseif($info->status=='late')
        <img src="{{asset('resources/web/images/project_step_over.jpg')}}">
        @endif
      </div>
      <ul class="project-info-prop clearfix">
        <li class="col-md">起投金额：<em>{{$info->finance_rule_money}} 元</em></li>
        <li class="col-sm">已投金额：<em>{{number_format($info->financed_money/10000,2)}} 万元</em></li>
        <li class="col-md">还需借款：<em>{{number_format(($info->finance_money-$info->financed_money)/10000,2)}} 万元</em></li>
        <li class="col-md">承诺机构：<em>{{$info->collateral_type=='collateral_type_3'?'无':$info->suretyCompany()->company_name}}</em></li>
        <li class="col-sm">担保方式：<em>{{$info->suretyWay()->name}}</em></li>
        <li class="col-md">还款方式：<em>{{$info->repayment()->name}}</em></li>
        <li class="col-md">红包活动：
          <em>{{$gift??'暂无活动'}}</em>
        </li>
      </ul>
    </div>
    <!--project info /-->
    <!--project content-->
    <div class="project-content">
      <div class="project-content-menu">
        <ul class="clearfix">
          @if($type_attr)
          @foreach($type_attr as $key=>$item)
          <li class="{{$key==0?'active':''}}">{{$item->attr_name}}</li>
          @endforeach
          @endif
          <li>收益测算</li>
          <li>投资明细</li>
        </ul>
      </div>
      <div class="project-content-box">
        <!--项目信息-->
        @if($type_attr)
        @foreach($type_attr as $key=>$item)
        @if($item->cate)
        <div class="papers {{$key==0?'':'hide'}}">
          @foreach(json_decode($item->content) as $img)
          <div class="img">
            <a href="javascript:;">
              <img src="{{$img->full_url}}"/>
              @if($img->filename)
              <span>{{$img->filename}}</span>
              @endif
            </a>
          </div>
          @endforeach
        </div>
        @else
        <div class="project-description {{$key==0?'':'hide'}}">{!! $item->content !!}</div>
        @endif
        @endforeach
        @endif
        <!--收益测算-->
        <div class="profit hide" id="J_profit">
          <div class="form-input">
            <label>投资金额：<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'');" class="txt" project="{{$info->id}}" id="invest_money" placeholder="请输入您的投资金额"> 元</label>
          </div>
          <div class="form-output">
            <h4>计算结果</h4>
            <div>
              <label>本息合计：<em id="J_profit_total">0.00</em>元</label>
              <label>利息收入共：<em id="J_profit_lixi">0.00</em>元</label>
            </div>
          </div>
          <div class="gain-list">
            <h4>本期收款表</h4>
            <ul>
              <li class="th">
                <span class="col-sm">期次</span>
                <span class="col-md">应收本息(元)</span>
                <span class="col-md">应收本金(元)</span>
                <span class="col-md">应收利息(元)</span>
              </li>
            </ul>
          </div>
        </div>
        <!--投资列表-->
        <div class="invest-list hide">
          <ul class="invest-table">
            <li class="th">
              <span class="col-sm">序号</span>
              <span class="col-md">投资人</span>
              <span class="col-md">投资金额(元)</span>
              <span class="col-md">投资时间</span>
            </li>
            @forelse($invest as $key=>$item)
            <li class="td">
              <span class="col-sm">{{$key+1}}</span>
              <span class="col-md">{{str_hide($item->user_name)}}</span>
              <span class="col-md">{{$item->invest_money}}</span>
              <span class="col-md">{{$item->invest_time}}</span>
            </li>
            @empty
            <li class="td">
              暂无投资记录
            </li>
            @endforelse
          </ul>
          {{$links}}
        </div>
      </div>
    </div>
    <!--project content /-->
  </div>
  <div class="detail-side R">
    @if($info->status=='rush')
    <!--投资进行中  status-start-->
    <div class="invest-bar status-start">
      <p class="surplus" id="need_money" data-need-money="{{$info->finance_money-$info->financed_money}}">项目剩余金额：<em>{{number_format(($info->finance_money-$info->financed_money),2)}}</em>元</p>
      @if($sina_balance)
      <p class="surplus">
        账户余额：<em>{{number_format($sina_balance['available_balance'],2)}}</em>元
      </p>
      @else
      <p class="surplus">未<a href="/login"><em>登录</em></a>，无法查看余额，无法投资</p>
      @endif
      <form class="form" action="/Project/investProject/{{$info->id}}" method="post" novalidate="novalidate">
        {{ csrf_field() }}
        <label class="label clearfix" id="J_invest_setmoney">
          <button type="button" class="minus">-</button>
          <input type="number" class="input" name="money" min="0" value="{{$info->finance_rule_money}}" required/>
          <button type="button" class="plus">+</button>
          <span class="unit">元</span>
        </label>
        <p>到期收益：<em id="J_invest_getmoney">0</em>元</p>
        <p id="J_val_width" data-balance="{{$sina_balance['available_balance']??''}}" data-min="{{$info->finance_rule_money}}" data-max="{{$info->finance_money}}" data-med="{{$info->finance_money-$info->financed_money}}">
          <?php if($info->finance_money-$info->financed_money>$info->finance_rule_money){?>
          起投金额{{$info->finance_rule_money}}元，止投金额{{floor($info->finance_money-$info->financed_money)}}元。
          <?php }else{?>
          可投金额{{floor($info->finance_money-$info->financed_money)}}
          <?php }?>
        </p>
        <div class="text-center pt20">
          <button type="submit" class="btn" {{empty($sina_balance) || ($info->finance_money<=$info->financed_money) || ($info->end_time<date('Y-m-d H:i:s'))?'disabled':''}}>立即投资</button>
        </div>
      </form>
      <div class="count-down text-center" id="J_count_down" data-endtime="{{date('Y/m/d',strtotime($info->end_time))}}">剩余时间: 9天21时30分 29秒</div>
    </div>
    @elseif($info->status=='full')
    <!--投资结束  status-stop-->
    <div class="invest-bar status-full">
      <div class="over-info">
        <p>投标已满额</p>
        <p>融资金额<em>{{number_format($info->finance_money)}}</em>元</p>
        <p>项目剩余金额：<em>{{number_format($info->finance_money-$info->financed_money,2)}}</em>元</p>
        <a class="btn" href="/projects">查看其它项目</a>
      </div>
      @if($info->interest_at)
      <div class="text-center">{{date('Y-m-d',strtotime($info->interest_at))}}合同成立</div>
      @endif
    </div>
    @elseif($info->status=='payment')
    <!--投资结束  status-done-->
    <div class="invest-bar status-stop ">
      <div class="over-info">
        <p>投标已满额</p>
        <p>融资金额<em>{{number_format($info->finance_money)}}</em>元</p>
        <p>项目剩余金额：<em>{{number_format($info->finance_money-$info->financed_money,2)}}</em>元</p>
        <a class="btn" href="/projects">查看其它项目</a>
      </div>
      @if($info->interest_at)
      <div class="text-center">{{date('Y-m-d',strtotime($info->interest_at))}}合同成立</div>
      @endif
    </div>
    @elseif($info->status=='finish')
            <!--投资结束  status-done-->
    <div class="invest-bar status-done ">
      <div class="over-info">
        <p>投标已满额</p>
        <p>融资金额<em>{{number_format($info->finance_money)}}</em>元</p>
        <p>项目剩余金额：<em>{{number_format($info->finance_money-$info->financed_money,2)}}</em>元</p>
        <a class="btn" href="/projects">查看其它项目</a>
      </div>
      @if($info->interest_at)
        <div class="text-center">{{date('Y-m-d',strtotime($info->interest_at))}}合同成立</div>
      @endif
    </div>
    @elseif($info->status=='fail')
    <!--投资流标  status-lose-->
    <div class="invest-bar status-lose">
      <div class="over-info">
        <p>投标已流标</p>
        <p>融资金额<em>{{number_format($info->finance_money)}}</em>元</p>
        <p>项目剩余金额：<em>{{number_format($info->finance_money-$info->financed_money,2)}}</em>元</p>
        <a class="btn" href="/projects">查看其它项目</a>
      </div>
      <div class="text-center">项目时间已过期</div>
    </div>
    @elseif($info->status='late')
    <!--投资过期  status-over-->
    <div class="invest-bar status-over">
      <div class="over-info">
        <p>投标已过期</p>
        <p>到期未还款</p>
        <p class="over-tips">由担保公司代偿</p>
        <a class="btn" href="#">查看其它项目</a>
      </div>
      <div class="text-center">担保公司代偿</div>
    </div>
    @endif
  </div>
</div>
<div class="Validation-information" style="display: none">
  <div class="user-account-setting-form postionFixed" id="gift-model">
    <div class="backIcon"><img src="{{asset('resources/web/images/back-icon.png')}}"></div>
    <form action="/Project/investProject/{{$info->id??''}}" method="post">
      <input type="hidden" name="money" value="0"/>
      <input type="hidden" name="gift_money" value="0"/>
      {{ csrf_field() }}
      <div>
        <h2 style="border:none;margin:0;padding:0">选择红包</h2>
        <div class="text-center">总金额：<em id="project-total">0</em></div>
        <div>
          <div class="cell">投资金额：<em id="project-money">0</em></div>
          <div class="cell">红包金额：<em id="gift-money">0</em></div>
        </div>
      </div>
      <hr/>
      <table class="checkbox">
        <thead>
          <tr>
            <th></th>
            <th>红包名称</th>
            <th>红包金额</th>
            <th>有效时间</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      <button type="submit" class="submit-btn">确 认</button>
    </form>
  </div>
</div>
@endsection
@section('scripts')
<script src="{{ asset('resources/web/js/products.js')}}"></script>
<script src="{{ asset('resources/web/js/img-mask-show.jquery.js')}}"></script>
<script type="text/javascript">
  // 图片模态放大展示；
  $(function(){
    $.imgMaskShow('.img');
  });
</script>
<script type="text/javascript">
  // 详情页 项目进度 canvas绘图
  $(function(){
    // DOM对象才有getContext方法，jquery没有
    var ctx = $('#J_detail_progress')[0].getContext('2d');
    // 进度值放到canvas标签里就行。通过获取canvas标签里的值来设置图画效果。
    var progressVal = $('#J_detail_progress').text();
    ctx.width = 70;
    ctx.height = 70;

    // 画圆线框
    function strokeArc(x,y,r,sa,ea,color){
      ctx.beginPath();
      ctx.arc(x,y,r,sa,ea);
      ctx.strokeStyle = color;
      ctx.lineWidth = 5;
      ctx.stroke();
    }

    // 坐标原点
    var x0 = ctx.width / 2,
      y0 = ctx.height / 2;
    // 起始角度
    var sAngle = -90*Math.PI/180;
    // 结束角度
    var eAngle = sAngle+parseInt(progressVal)/100 * 360 * Math.PI/180;
    strokeArc(35,35,30,sAngle,360*Math.PI/180,'#ddd');
    strokeArc(35,35,30,sAngle,eAngle,'#f4ae34');
    ctx.font="14px 'Microsoft YaHei'";
    ctx.textAlign = 'center';
    ctx.fillStyle = '#f4ae34';
    ctx.textBaseline = 'middle';
    ctx.fillText(progressVal,35,35);

    $("[name='money']").on('keyup',function(){
      if($(this).val()>$('#need_money').data('need-money')){
        $(this).val($('#need_money').data('need-money'))
      }
    });

    $("form.form").submit(function(){
      var minVal = parseFloat($('#J_val_width').data('min'));//最少投资金额
      var maxVal = parseFloat($('#J_val_width').data('max'));//总金额
      var invested=parseFloat($("#J_val_width").data('med'));//可投资金额
      var balance= parseFloat($('#J_val_width').data('balance'));//余额
      var money=parseInt($("[name='money']").val());
      if(!money){alert('请填写有效的投资金额');return false;}
      $("[name='money']").val(money);
      if(invested<=minVal){
        if(money!=invested){alert('最多投资'+invested);return false;}
      }else{
        if(money<minVal){
          alert('最少投资'+minVal);
          return false;
        }
        if(money>invested){
          alert('最多投资'+invested);
          return false;
        }
        if(money>balance){
          console.log(money>balance);
          alert('余额不足'+money);
          return false;
        }
        if((~~money)<money){
          alert('投资金额必须为整数');
          return false;
        }
      }
      if("{{$info->gift_check}}"=="0"){
        $("[type=submit]").attr("disabled","disabled");
        return true;
      }else{
        $('#gift-model').addClass('show');
        $('.Validation-information').show();
        var project_money=$("[name='money']").val();
        $("#project-money").html(project_money);
        $("[name='money']").val(project_money);
        $("#project-total").html(project_money);
        $.get("/getGift/"+project_money+"/{{$info->id}}").success(function(data){
          data=eval(data);
          if(data!=''){
            $(".checkbox tbody").html('');
            $("#gift-money").html(0);
            var input_type="{{$info->gift_money_auto?'checkbox':'radio'}}";
            for(var i in data){
              var html='<tr>';
              html+='<td><input type="'+input_type+'" value="'+data[i]['id']+'" name="gift[]" onclick="checkMoney()" money="'+data[i]['money']+'"/></td>';
              html+='<td>'+data[i]['name']+'</td>';
              html+='<td>'+data[i]['money']+'</td>';
              html+='<td>'+data[i]['end_time']+'</td></tr>';
              $(".checkbox tbody").append(html);
            }
          }
        });
        return false;
      }
    });
    $(".backIcon").click(function() {
      $('#gift-model').removeClass('show');
      $('.Validation-information').hide();
    });
  });
  function checkMoney(){
    var project_money=parseFloat($("#project-money").html());
    var gift_money=0;
    $(".checkbox input:checked").each(function(){
      gift_money+=parseFloat($(this).attr("money"));
    });
    $("#gift-money").html(gift_money);
    $("[name='gift_money']").val(gift_money);
    $("#project-total").html(gift_money+project_money);
  }
</script>
@endsection